/**
 * Created by zhong on 2018/1/30.
 */
import Vue from 'vue'

Vue.directive('select', {
    bind: function(el, binding) {
        let startpoint;
        let target = el.childNodes[0]
        let y,step=30
        let l = target.childNodes.length
        console.log(binding.value.count);
        if(binding.value.count){
            target.style.transform = "translateY(-"+(binding.value.count)*step +"px)"
        }
        function checkLength(y) {
            if(y > 0){
                target.style.transform = "translateY(0px)"
                binding.value.set(0)
                return false
            }else if(y < -(l-1)*step){
                target.style.transform = "translateY(-"+(l-1)*step +"px)"
                binding.value.set(l-1)
                return false
            }else{
                binding.value.set(parseInt(Math.abs(Math.round(y/step))))
                return true
            }
        }
        el.addEventListener("touchstart",function (event) {
            startpoint = event.targetTouches[0].clientY
            startpoint -= Number(String(target.style.transform).replace(/[^0-9\-,.]/g,''))
        })
        el.addEventListener("touchmove",function (event) {
            y = Math.floor(event.targetTouches[0].clientY - startpoint)
            // console.log(l,Math.floor(y/step));
            if(!checkLength(y)){
                return
            }
            target.style.transform = "translateY("+ y +"px)"
        })
        el.addEventListener("touchend",function (event) {
            if(!checkLength(y)){
                return
            }
            let i = Math.floor(y%step)
            if(i>step/2){
                let n = 0
                let timer = setInterval(function () {
                    if(i<step){
                        target.style.transform = "translateY("+ (y+n)+"px)"
                        i++,n++
                        // console.log(n,'x',y+n);
                    }else{
                        clearInterval(timer)
                    }
                },10)
            }else if(i<-step/2){
                let n = 0
                let timer = setInterval(function () {
                    if(i>-step){
                        target.style.transform = "translateY("+ (y+n)+"px)"
                        i--,n--
                        // console.log(n,'x',y-n);
                    }else{
                        clearInterval(timer)
                    }
                },10)
            }else{
                if(i>0){
                    let n = 0
                    let timer = setInterval(function () {
                        if(n<i){
                            target.style.transform = "translateY("+ (y-n)+"px)"
                            n++
                            // console.log(n,'x',y-n);
                        }else{
                            clearInterval(timer)
                        }
                    },10)
                }
                if(i<0){
                    let n =0
                    let timer = setInterval(function () {
                        if(n>i){
                            target.style.transform = "translateY("+ (y-n)+"px)"
                            n--
                            // console.log(n,'y',y+n);
                        }else{
                            clearInterval(timer)
                        }
                    },10)
                }

            }
        })
    }

})